<template>
    <div class="header-avator-con">
        <div class="user-dropdown-menu-con">
            <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
                <Dropdown transfer trigger="click"   @on-click="handleUserDropdown">
                    <a href="javascript:void(0)">
                        <span class="main-user-name">{{userInfo.nickname}}</span>
                        <Icon type="arrow-down-b"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem name="ownSpace">个人中心</DropdownItem>
                        <DropdownItem name="loginout" divided >退出登录</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Avatar src="avatorPath" style="background: #619fe7;margin-left: 10px;"></Avatar>
            </Row>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    data () {
        return {
            isFullScreen:false,
        }
    },
    computed: {
        ...mapGetters({userInfo:'getUserInfo'})
    },
    methods: {
        handleUserDropdown(name){

            //退出登录
            if(name === 'loginout'){
                this.$store.commit('LOGOUT');
                this.$router.push({path:'/login'});
            }else if(name === 'ownSpace'){

            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .user-dropdown-menu-con {
        display: inline-block;
        float:right;
    }  
    .header-avator-con{float:right; margin-right:15px;}
    
</style>